@import "_variables";
@import "_mixins";

ul.package-manager-selector, .pre-header {
  display: flex;
  padding: 0;
  margin: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--soft-border-color);
  background-color: var(--container-color);
  border-bottom: none;
  line-height: 45px;

  @include mobile-only {
    border-radius: 0;
    margin: 0 -20px;
    padding: 0 10px;
  }
}

.pre-header  {
  padding: 0 10px;

  code {
    background: none;
    padding: 0;
  }
}

ul.package-manager-selector li {
  padding: 0 10px;
  list-style: none;
  cursor: pointer;
  margin: 0;

  svg {
    vertical-align: middle;
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }

  &.active {
    font-weight: bold;
    border-bottom: 2px solid black;

    @include dark-mode {
      border-color: white;
    }
  }
}

pre.package-manager-command {
  display: none;

  &.active {
    display: block;
  }
}

.pre-header + pre, pre.package-manager-command {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
